<template>
  <div id="comment-box" v-if="loginUser.status == 1">
    <el-row align="top" gutter="12">
      <!-- 用户头像 -->
      <el-col :span="2">
        <el-avatar :size="44" :src="loginUser.infor.avatar" alt="用户头像" />
      </el-col>
      <!-- 评论输入框和按钮 -->
      <el-col :span="22">
        <div class="comment-bubble">
          <textarea
            v-model="content"
            class="comment-input"
            placeholder="发一条友善的评论吧~"
            rows="3"
          ></textarea>
          <div class="bubble-footer">
            <el-button class="bubble-button" @click="postComment">发布</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else>
    <h4>
      暂未
      <router-link
        :to="{ path: '/user-login', query: { redirect: '/show-article/' + props.articleId } }"
        >登录
      </router-link>
      ，无法评论
    </h4>
  </div>
</template>

<script setup lang="ts">
import { useArticleManageStore } from '@/stores/useArticleManageStore'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'

const props = defineProps({
  articleId: {
    type: Number,
    required: true,
  },
})
const currentUserStore = useCurrentUserStore()
const loginUser = currentUserStore.loginUser
const content = ref('')
const articleManageStore = useArticleManageStore()
const postComment = async () => {
  if (content.value.length == 0) {
    ElMessage.error('评论内容不允许为空')
    return
  }
  //提交评论信息
  try {
    await articleManageStore.postComment(Number(props.articleId), content.value)
    ElMessage.success('成功评论')
    content.value = ''

  } catch (error) {
    ElMessage.error(String(error))
  }
}
</script>

<style scoped>
#comment-box {
  padding: 16px 12px;
  background-color: #fff;
}

.comment-bubble {
  background: #f5f7fa;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.comment-bubble:focus-within {
  box-shadow: 0 0 0 2px #8bbdff;
}

.comment-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.bubble-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.bubble-button {
  background-color: #409eff;
  border: none;
  color: white;
  border-radius: 16px;
  padding: 6px 18px;
  font-size: 13px;
  transition: 0.2s;
}

.bubble-button:hover {
  background-color: #66b1ff;
}
</style>
